<script setup lang="ts">

const modules = import.meta.glob("../assets/gif/*.gif", { eager: true })
const gifList = computed(() => {
    return Object.keys(modules).map(key => {
        return {
            label: key.replace('../assets/gif/', '').replace('.gif', ''),
            // @ts-ignore
            url: modules[key].default
        }
    })

})
const previewImg = ref({
    label: '',
    url: ''
})
const previewImgList = ref([])
// @ts-ignore
previewImg.value = gifList.value[0]
function handlePreview(item: string, label: string) {
    // previewImg.value = {
    //     label,
    //     url: item
    // }
    if (previewImgList.value.length >= 6) {
        previewImgList.value.splice(0, 1)
    }
    //@ts-ignore
    previewImgList.value.push({
        label,
        url: item
    })

}
const getImage = (name: string): string => {
    return new URL(`../assets/gif/${name}.gif`, import.meta.url).href
}

const emojiInp = ref('')
</script>

<template>
    <main class="flex flex-col h-100% p-20px box-border">
        <div class="h-50%  flex flex-justify-center flex-items-center relative">
            <!--            <div flex flex-justify-center flex-items-center class="h-80% p-l-20px">-->
            <!--                <img :src="previewImg.url" alt="" class="previewImg">-->
            <!--            </div>-->
            <!--            <div class="previewImg-title">{{ previewImg.label }}</div>-->
            <!--        <div v-for="item in emojiInp" class="h-240px w-240px flex flex-items-center flex-justify-center" style="font-size: 40px">-->
            <!--          <img :src="item.url" alt="" class="previewImg">-->
            <!--          {{item}}-->
            <!--        </div>-->
            <div>{{ emojiInp }}</div>
            <div class="absolute bottom-20px left-50%">
                <el-input v-model="emojiInp"></el-input>
            </div>
        </div>
        <div class="h-50% left-emoji p-r-20px">
            <!--            <div class="emoji-box cursor-pointer flex flex-col gap-16px" v-for="(item, i) in gifList"-->
            <!--                @click="handlePreview(item.url, item.label)">-->
            <!--                <div flex-1 class="emoji-img-box">-->
            <!--                    &lt;!&ndash; <img class=" emoji-img" :src="getImage('小王')" alt=""> &ndash;&gt;-->
            <!--                    <img class=" emoji-img" :src="item.url" alt="">-->
            <!--                </div>-->
            <!--                <div>{{ item.label }}</div>-->
            <!--            </div>-->
            <iframe src="https://emoji.fengjun.wang/category/animals" class="w-99vw h-100%"></iframe>
        </div>

    </main>
</template>
<style lang="scss" scoped>
.left-emoji {
    border-top: 1px solid #d1d1d1;

    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    /* 创建5等分列 */
    gap: 10px;

    /* 可选：设置网格间隙 */
    .emoji-box {
        max-height: 200px;
        /* 可选：设置网格项的样式 */
        background-color: #f0f0f0;
        padding: 16px;
        text-align: center;

        .emoji-img-box {
            aspect-ratio: 1 / 1;
            width: 100%;
            height: auto;
            display: flex;
            align-items: center;

            .emoji-img {
                // aspect-ratio: 1 / 1;
                // max-width: 100%;
                width: 100%;
                height: auto;
                // height: 100%;
                object-fit: contain;
                /* 或 contain */
            }
        }


    }
}

.previewImg-title {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    padding-top: 20px;
}

.previewImg {
    width: 100%;
    height: 100%;
    object-fit: contain
}

/* 整个滚动条 */
::-webkit-scrollbar {
    cursor: pointer;
    width: 6px;
    /* 垂直滚动条宽度 */
    height: 6px;
    /* 水平滚动条高度 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 6px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    background: #bdbdbd;
    border-radius: 6px;
}

/* 滚动条滑块悬停状态 */
::-webkit-scrollbar-thumb:hover {
    background: #919191;
}
</style>